<template>
	<div>
		<a-descriptions class="descri">
			<a-descriptions-item label="应用名称" v-if="appConfig.name">{{ appConfig.name }}</a-descriptions-item>
			<a-descriptions-item label="应用来源">{{
				$TOOL.dictTypeData('APP_SOURCE', appConfig.appSource)
			}}</a-descriptions-item>
			<a-descriptions-item label="版本号">{{ appConfig.appVersion }}</a-descriptions-item>
			<a-descriptions-item label="移动端appId" v-if="appConfig.appAppId">{{ appConfig.appAppId
				}}</a-descriptions-item>
			<a-descriptions-item label="版本说明">{{ appConfig.appVersionNote }}</a-descriptions-item>
			<a-descriptions-item label="应用访问URL地址">{{ appConfig.appUrl }}</a-descriptions-item>


			<a-descriptions-item label="是否展示图标">{{
				appConfig.isHideLogo == '0' ? '否' : '是'
			}}</a-descriptions-item>
			<!-- <a-descriptions-item label="移动端上线时间">{{ appConfig.appOnlineTime }}</a-descriptions-item> -->



			<a-descriptions-item v-if="appConfig.permission" label="名单权限">{{
				appConfig.permission == '0' ? '全国' : '白名单'
			}}</a-descriptions-item>
			<a-descriptions-item v-if="appConfig.taskTime" label="应用上线时间">{{ appConfig.taskTime }}</a-descriptions-item>
			<!-- showParam -->
			<a-form ref="mobile" :model="formData" layout="vertical" v-if="showParam" class="foem">
				<a-form-item label="参数信息" name="param" :rule="[{ required: true, message: '请输入', trigger: 'blur' }]">
					<a-textarea class="scro" style="width: 100%" v-model:value="formData.param"
						:auto-size="{ minRows: 2, maxRows: 4 }" placeholder="参数信息" @change="handleChange" />
				</a-form-item>
			</a-form>
			<a-descriptions-item v-if="!showParam && appConfig.param" label="参数信息" :contentStyle="contentStyle"
				class="scro">{{ appConfig.param }}</a-descriptions-item>
			<a-descriptions-item label="下架原因" v-if="showRea">{{ appConfig.reason }}</a-descriptions-item>
			<a-descriptions-item label="logo">
				<!-- <img class="img-sty" :src="appLogo" @click="handlePreview(appLogo)" /> -->
				<AuthImg class="img-item" :authSrc="JSON.parse(appConfig.appLogo)[0].url" />
			</a-descriptions-item>
		</a-descriptions>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="imageUrl" />

		</a-modal>
	</div>
</template>

<script setup name="AppConfig">
import AuthImg from '@/components/authImg/index.vue'
import tool from '@/utils/tool'
import store from '@/store'
import { useRoute } from 'vue-router'
const route = useRoute()
const { propertiesId, isTest } = route.query
const formData = ref({
	param: ''
})
const datas = inject('detailDate')
const currentName = inject('currentName')

const showParam = ref(false)

let appConfig = datas.value?.appPropertiesList[0] ? datas.value?.appPropertiesList[0] : {}
store.dispatch('setAppVersion', appConfig.appVersion)
// if (isTest) {
// 	appConfig = datas.value?.appInfoAppPropertiesAddParam
// } else {
// 	if (propertiesId) {
// 		appConfig = datas.value?.appPropertiesList.find((v) => v.id === propertiesId)
// 	} else {
// 		appConfig = datas.value?.appPropertiesList[0]
// 	}
// }

const showRea = computed(() => {
	let bool = false
	const approvalType = tool.session.get('approvalType')
	const doneStatus = tool.session.get('doneStatus')
	if ((approvalType === '0' || approvalType === '8') && !doneStatus) {
		bool = true
	}
	return bool
})
const contentStyle = {
	maxHeight: '96px',
	overflowY: 'auto',
	marginRight: '30px'

}
watch(
	currentName,
	(newData, oldData) => {
		if (newData === '运营组审核') {
			// if (appConfig.param) {
			// 	showParam.value = true
			// }
			showParam.value = true
			formData.value.param = appConfig.param
			tool.session.set('param', formData.value.param)
		}
	},
	{ immediate: true }
)
const handleChange = () => {
	tool.session.set('param', formData.value.param)
}

const fileUrl = import.meta.env.VITE_FILE_URL_W
const appLogo = computed(() => {
	let str = ''
	if (appConfig.appLogo) {
		str = `${fileUrl}/${JSON.parse(appConfig.appLogo)[0].url}`
	}
	return str
})

const imageUrl = ref('')
let previewVisible = ref(false)
const handlePreview = (url) => {
	imageUrl.value = url
	previewVisible.value = true
}
const handleCancel = () => {
	previewVisible.value = false
}
</script>

<style lang="less" scoped>
.descri {
	margin-top: 10px;
}

.img-sty {
	width: 104px;
	height: 104px;
	cursor: pointer;
}

.foem .ant-form-item {
	width: 82%;
}
</style>
<style>
.scro::-webkit-scrollbar {
	width: 6px;
	height: 10px;
}

.scro::-webkit-scrollbar-track {
	width: 4px;
	background: rgba(#101F1C, 0.1);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.scro::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, .5);
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	transition: background-color .3s;
	cursor: pointer;
}

.scro::-webkit-scrollbar-thumb:hover {
	background-color: rgba(144, 147, 153, .3);
}
</style>
